<template>
<div class="AddList">
   <el-form ref="form" :model="form" label-width="120px">
  <el-form-item label="id：">
    <el-input v-model="form.typeid"></el-input>
  </el-form-item>
   <el-form-item label="名称：">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
   <el-form-item label="价格：">
    <el-input v-model="form.price"></el-input>
  </el-form-item>
   <el-form-item label="描述：">
    <el-input v-model="form.desc"></el-input>
  </el-form-item>
   <el-form-item label="类别：">
     <el-select v-model="form.typename" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item>
   <el-form-item label="图片：">
  <el-upload
  class="upload-demo"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-change="handleChange"
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit('form')">{{button=='编辑'?'编辑':button}}</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</div>
</template>
<script>
import {addListAll, updateItem} from '../http/api'
import $ from 'jquery'
export default {
  name: 'List',
  data () {
    return {
      fileList: [],
      button: '新增',
      form: {
        typeid: 0,
        name: '',
        price: '',
        desc: '',
        typename: '',
        img: ''
      },
      options: [{
        value: '蔬菜',
        label: '蔬菜'
      }, {
        value: '水果',
        label: '水果'
      }, {
        value: '坚果',
        label: '坚果'
      }]
    }
  },
  created: function () {
    console.log(this.$route.query)
    if (this.$route.query.row) {
      const row = JSON.parse(this.$route.query.row)
      this.form = row
      this.button = '编辑'
    }
  },
  methods: {
    handleChange (file, fileList) {
      console.log(file.raw)
      let formdate = new FormData()
      formdate.append('imgpath', file.raw)
      console.log(formdate.get('imgpath'))
      console.log($)
      $.ajax({
        url: 'api/file/upload',
        type: 'POST',
        cache: false,
        data: formdate,
        processData: false,
        contentType: false,
        success: (data) => {
          console.log(data)
          this.fileList.push({name: '', url: 'http://localhost:3000/' + data.img})
          this.form.img = data.img
        }
      })
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    onSubmit (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(this.form)
          if (this.button === '新增') {
            addListAll(this.form)
              .then(res => {
                console.log(res)
                if (res.status === 1) {
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  })
                } else {
                  this.$message({
                    message: res.msg,
                    type: 'error'
                  })
                }
              })
              .catch(err => {
                console.log(err)
              })
          } else {
            updateItem(this.form)
              .then(res => {
                console.log(res)
                if (res.status === 1) {
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  })
                } else {
                  this.$message({
                    message: res.msg,
                    type: 'error'
                  })
                }
              })
              .catch(err => {
                console.log(err)
              })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style  lang="less" scoped>
.AddList{
 /deep/ .el-form-item__content{
   display: flex!important;
 }
}
</style>
